<template>
  <div>
    <!-- 菜单组件 -->
    <div v-for="(item, index) in list" class="menu" @click="clickMenu(item)">{{ item.name }}</div>
  </div>
</template>

<script>
export default{
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {}
  },
  created() {
    console.log('组件内的list内容', this.list)
  },
  methods: {
    clickMenu(item) {
      if (!(this.$route.path == item.path)) {
        this.$router.push(item.path)
      }
    }
  }
}
</script>

<style scoped>
.menu{
  padding: 10px;
  text-align: center;
  color: white;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}
</style>
